{% extends 'base.html' %}
{% block title %}存款业务查询与管理{% endblock %}

{% block content %}

<!-- 顶部标题 -->
<div class="d-flex align-items-center mb-4" style="font-size: 20px; font-weight: bold; color: #333;">
  <i class="bi bi-clipboard-data-fill" style="font-size: 26px; color: #3f51b5; margin-right: 10px;"></i>
  存款业务管理
</div>

<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">

  <!-- 查询表单 -->
  <div class="card p-4 mb-4">
    <h5 class="fw-bold mb-3">🔍 查询存款业务</h5>

    {% if error %}
      <div class="alert alert-warning">{{ error }}</div>
    {% endif %}

    <form method="get" class="row gy-2 gx-3 align-items-center">
      <div class="col-md-3">
        <label class="form-label">查询模式</label>
                <!-- 查询表单字段部分 -->
        <select name="field" id="field" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="savingID" {% if field == 'savingID' %}selected{% endif %}>业务编号</option>
          <option value="savingName" {% if field == 'savingName' %}selected{% endif %}>业务名称</option>
          <option value="descrip" {% if field == 'descrip' %}selected{% endif %}>业务描述</option>
          <!-- 删除客户编号字段 -->
        </select>


      </div>

      <div class="col-md-3">
        <label class="form-label">字段</label>
        <select name="field" id="field" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="depositID" {% if field == 'depositID' %}selected{% endif %}>业务编号</option>
          <option value="name" {% if field == 'name' %}selected{% endif %}>业务名称</option>
          <option value="description" {% if field == 'description' %}selected{% endif %}>业务描述</option>
          <option value="customerID" {% if field == 'customerID' %}selected{% endif %}>客户编号</option>
        </select>
      </div>

      <div class="col-md-4">
        <label class="form-label">查询值</label>
        <div id="value-box">
          <input type="text" name="value" class="form-control" placeholder="请输入查询值" value="{{ value or '' }}">
        </div>
        <div id="range-box" class="d-flex gap-2" style="display: none;">
          <input type="text" name="low" class="form-control" placeholder="范围下限" value="{{ low or '' }}">
          <input type="text" name="high" class="form-control" placeholder="范围上限" value="{{ high or '' }}">
        </div>
      </div>

      <div class="col-auto mt-4">
        <button type="submit" class="btn btn-gray">查询</button>
        <a href="{{ url_for('deposits') }}" class="btn btn-secondary">重置</a>
      </div>
    </form>
  </div>

  <!-- 数据与操作区 -->
  <div class="card p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="fw-bold mb-0">📄 存款业务列表</h5>
      <div>
        <a href="{{ url_for('add_deposit') }}" class="btn btn-gray me-2">➕ 添加业务</a>
        <a href="{{ url_for('export_deposits') }}" class="btn btn-gray">导出 CSV</a>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered align-middle table-hover text-center">
       <!-- 表格表头 -->
      <thead class="table-light">
        <tr>
          <th>业务编号</th>
          <th>业务名称</th>
          <th>业务描述</th>
          <!-- 删除客户编号列 -->
          <th>操作</th>
        </tr>
      </thead>

      <!-- 表格数据 -->
      <tbody>
        {% for d in deposits %}
        <tr>
          <td>{{ d.savingID }}</td>
          <td>{{ d.savingName }}</td>
          <td>{{ d.descrip }}</td>
          <!-- 删除客户编号列 -->
          <td>
            <a href="{{ url_for('edit_deposit', savingID=d.savingID) }}" class="btn btn-sm btn-outline-primary me-2">编辑</a>
            <a href="{{ url_for('delete_deposit', savingID=d.savingID) }}" class="btn btn-sm btn-outline-danger" onclick="return confirm('确定删除该业务吗？')">删除</a>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="4" class="text-muted">暂无数据</td>
        </tr>
        {% endfor %}
      </tbody>

      </table>
    </div>
  </div>

</div>

<!-- 查询模式切换脚本 -->
<script>
  function onModeChange() {
    const mode = document.getElementById('mode').value;
    const valueBox = document.getElementById('value-box');
    const rangeBox = document.getElementById('range-box');

    if (mode === 'range') {
      valueBox.style.display = 'none';
      rangeBox.style.display = 'flex';
    } else if (mode === 'exact' || mode === 'fuzzy') {
      valueBox.style.display = 'block';
      rangeBox.style.display = 'none';
    } else {
      valueBox.style.display = 'none';
      rangeBox.style.display = 'none';
    }
  }
  document.addEventListener('DOMContentLoaded', onModeChange);
</script>

{% endblock %}
